<template>
  <div class="page">
    <a-space direction="vertical" :size="16" fill>
      <a-grid :cols="24" :col-gap="24" :row-gap="24">
        <a-grid-item :span="24">
          <a-card class="general-card">
            <a-row justify="space-between" :gutter="20">
              <a-col v-for="(item, idx) in topGrid.data" :span="24 / topGrid.data.length">
                <a-card>
                  <div class="flex">
                    <a-statistic :title="item.title" :value="item.count" show-group-separator :value-from="0" animation>
                      <template #prefix>
                        <span
                          class="statistic-prefix"
                          :style="{
                            background: idx == 0 ? '#FFE4BA' : idx == 1 ? '#E8FFFB' : '#E8F3FF',
                          }"
                        >
                          <component
                            :is="idx == 0 ? 'icon-common' : idx == 1 ? 'icon-common' : 'icon-common'"
                            :style="{
                              color: idx == 0 ? '#F77234' : idx == 1 ? '#33D1C9' : '#165DFF',
                            }"
                          />
                        </span>
                      </template>
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>
            </a-row>
            <Chart style="height: 728px; margin-top: 20px" :option="chartOption" />
          </a-card>
        </a-grid-item>
      </a-grid>
    </a-space>
  </div>
</template>

<script lang="ts" setup>
import { LineSeriesOption } from 'echarts'
import { ToolTipFormatterParams } from '@/types/echarts'
import useThemes from '@/hooks/themes'
import { get, post, message } from '@/utils'
interface GridData {
  title: string
  count: any
}
const { isDark } = useThemes()
/**顶部grid布局统计数据 */

const topGrid = reactive({
  data: [] as GridData[],
  getData: () => {
    get({ url: '/server-base/admin/stats/goods/count' }, ({ data }) => {
      console.log(data)
      topGrid.data = data
    })
  },
})
topGrid.getData()
/**图表数据 */
const tooltipItemsHtmlString = (items: ToolTipFormatterParams[]) => {
  return items
    .map(
      (el: any) => `<div class="content-panel">
          <p>
            <span style="background-color: ${el.color}" class="tooltip-item-icon"></span><span>${el.seriesName}</span>
          </p>
          <span class="tooltip-value">${el.value.toLocaleString()}</span>
        </div>`
    )
    .reverse()
    .join('')
}

const xAxis = ref<string[]>(
  new Array(8).fill(0).map((_item, index) => {
    return `08-1${index}`
  })
)
const generateSeries = (name: string, lineColor: string, itemBorderColor: string, data: number[]): LineSeriesOption => {
  return {
    name,
    data,
    stack: 'Total',
    type: 'line',
    smooth: true,
    symbol: 'circle',
    symbolSize: 10,
    itemStyle: {
      color: lineColor,
    },
    emphasis: {
      focus: 'series',
      itemStyle: {
        color: lineColor,
        borderWidth: 2,
        borderColor: itemBorderColor,
      },
    },
    lineStyle: {
      width: 2,
      color: lineColor,
    },
    showSymbol: false,
    areaStyle: {
      opacity: 0.1,
      color: lineColor,
    },
  }
}

const chartOption = reactive({
  title: {
    text: '客单量趋势',
  },
  grid: {
    left: '2.5%',
    right: '2.5%',
    top: '10%',
    bottom: '40',
  },
  xAxis: {
    type: 'category',
    offset: 2,
    data: xAxis.value,
    boundaryGap: false,
    axisLabel: {
      color: '#4E5969',
    },
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    splitLine: {
      show: false,
    },
    axisPointer: {
      show: true,
      lineStyle: {
        color: '#23ADFF',
        width: 1,
      },
    },
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: false,
    },
    splitLine: {
      lineStyle: {
        color: isDark.value ? '#2E2E30' : '#F2F3F5',
      },
    },
  },
  tooltip: {
    trigger: 'axis',
    formatter(params) {
      const [firstElement] = params as ToolTipFormatterParams[]
      return `<div>
              <p class="tooltip-title">${firstElement.axisValueLabel}</p>
              ${tooltipItemsHtmlString(params as ToolTipFormatterParams[])}
            </div>`
    },
    className: 'echarts-tooltip-diy',
  },

  series: [generateSeries('客单量', '#24A3FF', '#F5E8FF', [100, 20, 3, 4, 511, 31, 70, 1])],
})
</script>

<style scoped lang="less">
:deep(.arco-statistic) {
  .arco-statistic-title {
    color: rgb(var(--gray-10));
    font-weight: bold;
  }
  .arco-statistic-value {
    display: flex;
    align-items: center;
  }
}
.statistic-prefix {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  color: var(--color-white);
  font-size: 16px;
  line-height: 32px;
  text-align: center;
  vertical-align: middle;
  border-radius: 6px;
}
.flex {
  justify-content: center;
}
</style>
